<template>
  <view class="scenery-app">
    <h1>西安美景</h1>
    <view class="gallery">
      <view class="scenery-item" v-for="scenery in sceneryList" :key="scenery.title">
        <img 
          :src="scenery.image" 
          :alt="scenery.title" 
          class="image" 
          @click="openZoomModal(scenery.image)" 
        />
        <h2>{{ scenery.title }}</h2>
        <p>{{ scenery.description }}</p>
      </view>
    </view>
	<!-- 图片扩大使用zoomedImage函数 -->
    <view v-if="zoomedImage" class="zoom-modal">
      <img :src="zoomedImage" alt="Zoomed Image" />
      <button @click="closeZoomModal">关闭</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const sceneryList = ref([
 {
   title: '西安古城墙',
   image: 'https://img95.699pic.com/photo/50083/8839.jpg_wh860.jpg',
   description: '西安古城墙是中国现存规模最大、保存最完整的古代城垣。'
 },
 {
   title: '大雁塔',
   image: 'https://ts1.cn.mm.bing.net/th/id/R-C.9213d8f2fc3649751916d736d1f9ec35?rik=5x90X54PXEPH0w&riu=http%3a%2f%2fphotos.tuchong.com%2f38858%2ff%2f830553.jpg&ehk=nhN8sQAVm89UfqcY2c1NehTJz27pbxiJOz4nuS5BRyY%3d&risl=&pid=ImgRaw&r=0',
   description: '大雁塔是西安的标志性建筑之一，也是中国古代建筑的杰作。'
 },
 {
   title: '兵马俑',
   image: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/ef52250c200a0f23587cfed61c62a93e.jpg!/fw/750/quality/99/unsharp/true/compress/true',
   description: '兵马俑是世界文化遗产，被誉为“世界第八大奇迹”。'
 },
 {
   title: '钟楼',
   image: 'https://bpic.588ku.com/back_origin_min_pic/20/11/05/d5e0fcc45d42f03151915a0e30929a46.jpg',
   description: '钟楼是中国古代遗留下来众多钟楼中形制最大、保存最完整的一座。'
 },
 {
   title: '回民街',
   image: 'https://pic.vjshi.com/2021-03-18/844569df2d5bcf07cb2d07fd015b2496/00002.jpg?x-oss-process=style/watermark',
   description: '回民街是西安著名的美食文化街区，汇集了各种地方特色小吃。'
 }
]);

const zoomedImage = ref(null);

function openZoomModal(src) {
  zoomedImage.value = src;
}

function closeZoomModal() {
  zoomedImage.value = null;
}
</script>

<style scoped>
.scenery-app {
  text-align: center;
  padding: 20px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.scenery-item {
  width: 300px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.scenery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
}

.scenery-item h2 {
  margin: 0;
  padding: 10px;
  background-color: #f7f7f7;
  color: #333;
}

.scenery-item p {
  margin: 10px;
  font-size: 14px;
  color: #666;
}

.zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.zoom-modal img {
  max-width: 90%;
  max-height: 90%;
}
</style>